<template>
  <view class="notification-page">
    <!-- 顶部返回按钮和标题 -->
    <view class="header">
      <tn-button 
        backgroundColor="tn-bg-left" 
        style="color: black; margin-top: 10px; width: 35px; height: 35px; font-size: 25px;" 
        :border="false"
        @click="handleReturn"
      >
        <text class="tn-icon-left"></text>
      </tn-button>
      <view class="page-title">消息通知</view>
    </view>

    <!-- 消息列表 -->
    <view class="notification-list">
      <tn-list-view 
        v-for="message in messages" 
        :key="message.id" 
        :card="true" 
        unlined="all" 
        @click="handleMessageClick(message)"
      >
        <tn-list-cell>
          <view class="message-item">
            <image class="avatar" :src="message.avatar" mode="aspectFill"></image>
            <view class="message-content">
              <view class="message-title">{{ message.title }}</view>
              <view class="message-summary">{{ message.summary }}</view>
            </view>
            <view class="message-time">{{ message.time }}</view>
          </view>
        </tn-list-cell>
      </tn-list-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 消息列表数据
      messages: [
        {
          id: 1,
          avatar: "https://via.placeholder.com/50",
          title: "系统通知",
          summary: "您的账户已成功升级为VIP会员。",
          time: "2024-12-01 10:00"
        },
        {
          id: 2,
          avatar: "https://via.placeholder.com/50",
          title: "订单通知",
          summary: "您有一笔新的订单已发货，请注意查收。",
          time: "2024-11-30 15:30"
        },
        {
          id: 3,
          avatar: "https://via.placeholder.com/50",
          title: "活动通知",
          summary: "欢迎参加我们的双十二促销活动，全场五折。",
          time: "2024-11-29 09:45"
        }
      ]
    };
  },
  methods: {
    // 返回上一页
    handleReturn() {
      uni.navigateBack({ delta: 1 });
    },
    // 消息点击事件
    handleMessageClick(message) {
      console.log(`点击了消息：${message.title}`);
      // 可以跳转到消息详情页
      uni.navigateTo({
        url: `/pages/notification/detail?id=${message.id}`
      });
    }
  }
};
</script>

<style scoped>
.notification-page {
  padding: 15px;
  background-color: #f5f5f5;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-left: 10px;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.notification-list {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
}

.message-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-right: 10px;
}

.message-content {
  flex: 1;
}

.message-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.message-summary {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}
</style>